<template>
	<z-nav-bar title="课程"></z-nav-bar>
	<!-- <view class="top-box flex_cc">
		<view class="switch flex_sbc">
			<view class="item" :class="{ 'uni-white-bg uni-color text-w': !topBox }" @click="topBox = 0">独立课程</view>
			<view class="item" :class="{ 'uni-white-bg uni-color text-w': topBox }" @click="topBox = 1">课程计划</view>
		</view>
	</view>
	<view v-if="!topBox" class="uni-mt-120">-->
	<view v-if="!topBox">
		<view v-if="course.list.length">
			<view v-for="data in course.list" :key="data.id" class="content" style="padding: 24rpx 32rpx 0">
				<view class="common-box uni-mt-38">
					<view class="flex_fs">
						<image
							:src="setting.oss_pub_domain + '/app-img/icon/icon-course.png'"
							class="icon-size"
						></image>
						<view class="uni-ml-14 width-100">
							<view class="flex_fsc text-w">
								<view class="uni-mr-16 flex_sh">第{{ data.serialNumber }}课</view>
								<view class="u-line-1">{{ data.name }}</view>
							</view>
							<view>
								<view class="uni-color-grey z-font-24 uni-mt-8">{{ data.beginTime }}</view>
								<view class="flex_sbc uni-mt-20">
									<view class="start" @click="startClass(data)">
										{{ data.status == 2 ? '查看' : '开始授课' }}
									</view>
									<view class="flex_fsc uni-mr-40" @click="editCourse(data)">
										<image
											:src="setting.oss_pub_domain + '/app-img/icon/icon_edit.png'"
											class="icon-size-32"
										></image>
										<view class="uni-color-main">编辑</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="line-spacing uni-my-34"></view>
					<view v-for="question in data.relQuestionSchemeList || []" :key="question.id" class="course-item">
						<view>{{ question.name }}</view>
						<view class="flex_sbc uni-mt-12">
							<view class="tag u-line-1 uni-mr-16">{{ question.descriptionTagName }}</view>
							<view class="z-font-24 uni-color-main-grey flex_sh">
								{{ data.result[question.id].trainingState ? '已解决' : '未解决' }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<z-no-data v-else placeholder="暂无课程"></z-no-data>
	</view>
	<view v-else class="uni-mt-92">
		<view v-if="plan.list.length">
			<view v-for="data in plan.list" :key="data.id" class="content" style="padding: 24rpx 32rpx 0">
				<view class="flex_sbc uni-mt-32">
					<view class="z-font-32 text-w u-line-1">{{ data.name }}</view>
					<view class="flex_fsc flex_sh">
						<view class="flex_fsc uni-mr-40" @click="editPlan(data)">
							<image
								:src="setting.oss_pub_domain + '/app-img/icon/icon_edit.png'"
								class="icon-size-32"
							></image>
							<view class="uni-color-main">编辑</view>
						</view>
					</view>
				</view>
				<view v-for="course in data.relStuCourseList" :key="course.id" class="common-box uni-mt-38">
					<view class="flex_fs">
						<image
							:src="setting.oss_pub_domain + '/app-img/icon/icon-course.png'"
							class="icon-size"
						></image>
						<view class="uni-ml-14 width-100">
							<view class="text-w">{{ course.name }}</view>
							<view>
								<view class="uni-color-grey z-font-24 uni-mt-8">{{ course.beginTime }}</view>
								<view class="flex_sbc uni-mt-20">
									<view class="start" @click="startClass(course)">开始授课</view>
									<view class="flex_cc" @click="course.extQuestion = !course.extQuestion">
										<view class="uni-color-main-grey">
											{{ course.extQuestion ? '收起' : '展开' }}
										</view>
										<image
											:src="`${setting.oss_pub_domain}/app-img/icon/${
												course.extQuestion ? 'icon-ext-up' : 'ext-81A290'
											}.png`"
											class="icon-size-32"
										></image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="course.extQuestion">
						<view class="line-spacing uni-my-34"></view>
						<view
							v-for="question in course.relQuestionSchemeList || []"
							:key="question.id"
							class="course-item"
						>
							<view>{{ question.name }}</view>
							<view class="flex_sbc uni-mt-12">
								<view>
									<view class="tag">{{ question.descriptionTagName }}</view>
								</view>
								<view class="z-font-24 uni-color-main-grey">
									{{ course.result[question.id].trainingState ? '已解决' : '未解决' }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<z-no-data v-else placeholder="暂无课程"></z-no-data>
	</view>
	<bottom-box :buts="buts" @change="butChange"></bottom-box>
</template>

<script setup>
import { onLoad, onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
const { proxy: that } = getCurrentInstance();
import { getCourseList, editCoursePlan } from '@/api/player.js';
const playerInfo = uni.getStorageSync('player-info');

onLoad((opt) => {
	topBox.value = parseInt(opt.tab || 0);
});

// 获取数据
const course = reactive({
		list: [],
		total: '',
		num: 1,
		size: 10
	}),
	plan = reactive({
		list: [],
		total: '',
		num: 1,
		size: 10
	});

fetchData(0);
// fetchData(1);

function fetchData(type) {
	const tData = type ? plan : course;
	getCourseList({
		pageNum: tData.num,
		pageSize: tData.size,
		userId: playerInfo.id,
		type
	}).then((res) => {
		res.rows.forEach((item) => {
			if (type)
				item.relStuCourseList.forEach((course) => {
					course.result = JSON.parse(course.result);
				});
			else item.result = JSON.parse(item.result);
		});
		if (tData.num === 1) {
			tData.list = [];
			that.$nextTick(() => {
				tData.list = res.rows;
			});
		} else tData.list.push(res.rows);
		tData.total = res.total;
		uni.stopPullDownRefresh();
	});
}

onPullDownRefresh(() => {
	const tData = topBox.value ? course : plan;
	tData.num = 1;
	fetchData(topBox.value);
});

onReachBottom(() => {
	const tData = topBox.value ? course : plan;
	if (tData.list.length >= tData.total) return;
	tData.num += 1;
	fetchData(topBox.value);
});

// 编辑计划
function editPlan(data) {
	uni.setStorageSync('edit-plan', data);
	uni.navigateTo({
		url: '/pages/player/course/plan-edit',
		events: {
			editDone: () => {
				topBox.value = 1;
				plan.num = 1;
				fetchData(1);
			}
		}
	});
}

// 编辑课程
function editCourse(data) {
	uni.setStorageSync('edit-course', data);
	uni.navigateTo({
		url: '/pages/player/course/course-edit',
		events: {
			editDone: (data) => {
				topBox.value = 0;
				course.num = 1;
				fetchData(0);
			}
		}
	});
}

// 开始授课
function startClass(course) {
	uni.setStorageSync('edit-course', course);
	uni.navigateTo({
		url: '/pages/course/details/details',
		events: {
			show: (data) => {
				topBox.value ? (plan.num = 1) : (course.num = 1);
				if (data && data.status == 2) course.status = 2;
				else fetchData(topBox.value);
			}
		}
	});
}

// 顶部切换
const topBox = ref(0);
function switchTop(e) {
	topBox.value = e.detail.current;
}

// 底部按钮
const buts = [
	{
		label: '创建课程',
		bgColor: 'uni-color-main-bg'
	}
	// ,
	// {
	// 	label: '创建新的教学计划',
	// 	bgColor: 'uni-orange-bg',
	// 	width: 300
	// }
];

function butChange(e) {
	uni.removeStorageSync('edit-plan');
	uni.removeStorageSync('edit-course');
	const urls = ['/pages/player/course/course-edit', '/pages/player/course/plan-edit'];
	uni.navigateTo({
		url: urls[e],
		events: {
			editDone: (data) => {
				topBox.value ? (plan.num = 1) : (course.num = 1);
				fetchData(topBox.value);
			}
		}
	});
}
</script>

<style lang="scss">
@import './css/plan.scss';
</style>
